<template>
  <div class='publish'>
    <header>
      <img src="../../../static/index/left.png"
           alt=""
           @click='onClickLeft'>
      <span>我的发布</span>
    </header>
    <van-tabs v-model="active"
              swipeable
              :animated=true>
      <van-tab v-for="(index,idx) in arr"
               :title="index"
               :key='idx'
      >
        <!-- 内容 -->
        <ul class="content" v-if="active===0">
          <router-link tag="li"
                       v-if="publishLish.length > 0"
                       :to="'/detail/'+item.id"
                       v-for="item in publishLish"
                       :key="item.id"
          >
            <div class='txt'>
              <p>
                <img v-if="item.img_path" :src="`${imgUrl}${item.img_path}`"
                     alt="" width="82" height="82">
                <img v-else :src="`${imgUrl}${collectListUrl}`" width="82" height="82" alt="">
              </p>
              <div>
                <p>{{item.title}}</p>
                <p>区域:其他 区/今天</p>
                <p>房源编号7074 信息已认证为真实房源</p>
              </div>
            </div>
            <div class='bet'>
              <span>时间:2019-12-23 12:30:12</span>
              <p>
                <button @click.stop="handleDeletePosts(item.id)">删除</button>
                <button @click.stop="showTop(item.id)">置顶</button>
              </p>
            </div>
          </router-link>
          <span v-else>暂无数据</span>
        </ul>
        <ul class="content" v-if="active===1">
          <router-link tag="li"
                       v-if="publishLishSh.length > 0"
                       :to="'/detail/'+item.id"
                       v-for="item in publishLishSh"
                       :key="item.id"
          >
            <div class='txt'>
              <p>
                <img v-if="item.img_path" :src="`${imgUrl}${item.img_path}`"
                     alt="" width="82" height="82">
                <img v-else :src="`${imgUrl}${collectListUrl}`" width="82" height="82" alt="">
              </p>
              <div>
                <p>{{item.title}}</p>
                <p>区域:其他 区/今天</p>
                <p>房源编号7074 信息已认证为真实房源</p>
              </div>
            </div>
            <div class='bet'>
              <span>时间:2019-12-23 12:30:12</span>
              <!--<p>-->
              <!--<button @click.stop="handleDeletePosts(item.id)">删除</button>-->
              <!--<button @click.stop="showTop(item.id)">置顶</button>-->
              <!--</p>-->
            </div>
          </router-link>
          <span>暂无数据</span>
        </ul>
        <ul class="content" v-if="active===2">
          <router-link tag="li"
                       v-if="publishLiTg.length > 0"
                       :to="'/detail/'+item.id"
                       v-for="item in publishLiTg"
                       :key="item.id"
          >
            <div class='txt'>
              <p>
                <img v-if="item.img_path" :src="`${imgUrl}${item.img_path}`"
                     alt="" width="82" height="82">
                <img v-else :src="`${imgUrl}${collectListUrl}`" width="82" height="82" alt="">
              </p>
              <div>
                <p>{{item.title}}</p>
                <p>区域:其他 区/今天</p>
                <p>房源编号7074 信息已认证为真实房源</p>
              </div>
            </div>
            <div class='bet'>
              <span>时间:2019-12-23 12:30:12</span>
              <!--<p>-->
              <!--<button @click.stop="handleDeletePosts(item.id)">删除</button>-->
              <!--<button @click.stop="showTop(item.id)">置顶</button>-->
              <!--</p>-->
            </div>
          </router-link>
          <span v-else>暂无数据</span>
        </ul>
      </van-tab>
    </van-tabs>
    <van-popup v-model="show"
               get-container="body"
               :round=true
               :style="{ width: '80%',padding:'10px',top:'37%' }">
      <h3 class='title'>信息置顶</h3>
      <div class='bet'
           @click='topType'>
        <span>置顶类型</span>
        <p>
          <span>{{StickType}}</span>
          <img src="../../../static/index/right.png"
               alt="">
        </p>
      </div>
      <div class='bet'
           @click='topDays'>
        <span>置顶天数</span>
        <p>
          <span>{{StickDays}}</span>
          <img src="../../../static/index/right.png"
               alt="">
        </p>
      </div>
      <div class='notice'>
        您目前拥有金币{{money_own}},将扣除您的金币:<span>{{FilterStick}}</span>
      </div>
      <button class='config' @click="submitConfig">确认提交置顶</button>
    </van-popup>
    <div class='select'>
      <van-popup v-model="showType">
        <van-picker show-toolbar
                    title="置顶类型"
                    :columns="type"
                    @cancel="onCancel"
                    @confirm="onConfirm"/>
      </van-popup>
      <van-popup v-model="showDay">
        <van-picker show-toolbar
                    title="置顶天数"
                    :columns="day"
                    @cancel="onCancelDay"
                    @confirm="onConfirmDay"/>
      </van-popup>
    </div>
  </div>
</template>
<script>
  import {getStore} from '@/config/mUtils'

  export default {
    name: 'publish',
    data() {
      return {
        arr: ['我发布的信息', '审核中的信息', '推广中的信息'],
        active: 0,
        publishId: '', //当前选中ID
        publishLish: [],
        show: false,
        type: ['小类置顶', '大类置顶', '首页置顶'],
        showType: false,
        showDay: false,
        day: ['1天', '7天', '30天', '90天', '365天'],
        money_own: 0, //拥有全部金币
        StickType: '小类置顶',  //置顶类型名称
        StickDays: '1天', //置顶天数天数
        TypeNum: 2, //置顶类型对应值
        DaysNum: 1, //置顶天数对应值
        StickNumber: 0, //总和
        upgrade_type: 'cfg_member_upgrade_list_top', //接口需要的参数
        // BaseUrl: this.$parent.imgUrl,
        imgUrl: 'http://menpuwang.com/',
        collectListUrl: '/attachment/information/201908/1566036018dw19p.jpg',
        publishLishSh: [],
        publishLiTg: [],
      }
    },
    computed: {
      FilterStick() {
        return this.StickNumber = Number(this.TypeNum) * Number(this.DaysNum)
      }
    },
    methods: {
      initDate() {
        //个人信息
        this.$axios.post('user/info', this.qs.stringify({
          "token": getStore("token")
        })).then((res) => {
          this.money_own = res.data.data.money_own
        });
        //发布列表
        this.$axios.post('user/myIssue', this.qs.stringify({
          "token": getStore("token"),
          "limitRow": 100,
        })).then((res) => {
          this.publishLish = res.data.data.info
        });
      },
      //审核中的信息
      GerServerShenHe() {
        this.$axios.post('user/myIssue', this.qs.stringify({
          "token": getStore("token"),
          "l": "shenhe",
          "limitRow": 100,
        })).then((res) => {
          this.publishLishSh = res.data.data.info
          // console.log(this.publishLishSh)
        });
      },
      //推广中的信息
      GerServerTuiGuang() {
        this.$axios.post('user/myIssue', this.qs.stringify({
          "token": getStore("token"),
          "l": "tuiguang ",
          "limitRow": 100,
        })).then((res) => {
          this.publishLiTg = res.data.data.info
        });
      },
      //帖子置顶接口
      GetServerDate() {
        this.$axios.post('category/toTop', this.qs.stringify({
          "token": getStore("token"),
          "id": this.publishId,
          "upgrade_type": this.upgrade_type,
          "upgrade_time": this.upgrade_time
        })).then((res) => {
          if ( res.data.status === 1 ) {
            this.$toast.success(res.data.message)
            this.show = false
          } else {
            this.$toast.fail(res.data.message)
          }
        });
      },
      //置顶类型
      onConfirm(value) {
        this.StickType = value
        switch (this.StickType) {
          case '小类置顶':
            this.TypeNum = 2
            this.upgrade_type = 'cfg_member_upgrade_list_top'
            break;
          case '大类置顶':
            this.TypeNum = 2
            this.upgrade_type = 'cfg_member_upgrade_top'
            break;
          default:
            this.TypeNum = 4
            this.upgrade_type = 'cfg_member_upgrade_index_top'
            break;
        }
        // this.StickType === '小类置顶' || this.StickType === '大类置顶' ? this.TypeNum = 2 : this.TypeNum = 4
        this.showType = false
      },
      //置顶天数
      onConfirmDay(value) {
        this.StickDays = value
        let str = value.substring(0, value.indexOf('天'))
        this.DaysNum = str
        this.showDay = false
      },
      //确认提交
      submitConfig() {
        if ( this.StickNumber > this.money_own ) {
          this.$toast.fail('金币不足')
          return
        } else {
          this.$dialog.confirm({
            title: '支付积分',
            message: `确定使用${this.StickNumber}金币${this.StickType}${this.StickDays}吗？`
          }).then(() => {
            //调用置顶接口
            this.GetServerDate()
          }).catch(() => {
            this.$toast.fail('取消操作')
          });
        }
      },
      //删除帖子
      handleDeletePosts(id) {
        this.$dialog.confirm({
          title: '确定要删除这项帖子吗？'
        }).then(() => {
          this.$axios.post('Information/del', this.qs.stringify({
            "token": getStore("token"),
            "id": id,
          })).then((res) => {
            if ( res.data.status === 1 ) {
              this.initDate()
              this.$toast.success(res.data.message)
            } else {
              this.$toast.fail(res.data.message)
            }
          });
        }).catch(() => {
          this.$toast.fail('取消操作')
        });
      },
      onClickLeft() {
        this.$router.go(-1)
      },
      topDays() {
        this.showDay = true
      },
      //置顶弹窗
      showTop(id) {
        this.publishId = id
        this.show = true
      },
      topType() {
        this.showType = true
      },
      onCancel() {
        this.showType = false
      },
      onCancelDay() {
        this.showDay = false
      },
    },
    created() {
      this.initDate()
    },
    watch: {
      "active": function () {
        if ( this.active === 0 ) {
          this.initDate()
        }
        if ( this.active === 1 ) {
          this.GerServerShenHe()
        }
        if ( this.active === 2 ) {
          this.GerServerTuiGuang()
        }
      }
    }
  }
</script>
<style scoped>
  @import "../../assets/css/publish.css";

</style>
